<div ref="dumpContainerWrapper"
     class="dump-container-wrapper ${dumpContainer.textWrap ? 'text-wrap' : ''}"></div>

<div class="user-input-container" show.bind="model.inputRequest">
    <label class="badge bg-primary">Input:</label>
    <input ref="txtUserInput"
           class="form-control"
           type="text"
           placeholder="Hit [Enter] to submit..."
           value.bind="model.inputRequest.userInput">
</div>

<div portal="#resultsOutputPaneToolbarRightPortal" class="d-flex align-items-center gap-3">
    <div>
        <div data-bs-toggle="dropdown">
            <span class="dropdown-toggle text-semibold">
                Export
            </span>
            <ul class="dropdown-menu">
                <li click.trigger="exportOutputToExcel()">
                    <button class="dropdown-item">
                        <i class="excel-file-icon text-green me-3"></i>
                        <span>Export to Excel</span>
                    </button>
                </li>
                <li click.trigger="exportOutputToHtml()">
                    <button class="dropdown-item">
                        <i class="html-icon text-orange me-3"></i>
                        <span>Export to HTML</span>
                    </button>
                </li>
            </ul>
        </div>
    </div>

    <div>
        <div data-bs-toggle="dropdown">
            <span class="dropdown-toggle text-semibold">
                Format
            </span>
            <ul class="dropdown-menu">
                <li click.trigger="dumpContainer.resultControls.collapseAll(1)">
                    <button class="dropdown-item">
                        Collapse to Level 1
                    </button>
                </li>
                <li click.trigger="dumpContainer.resultControls.collapseAll(2)">
                    <button class="dropdown-item">
                        Collapse to Level 2
                    </button>
                </li>
                <li click.trigger="dumpContainer.resultControls.collapseAll(3)">
                    <button class="dropdown-item">
                        Collapse to Level 3
                    </button>
                </li>
                <div class="dropdown-divider"></div>
                <li click.trigger="dumpContainer.resultControls.expandAll(1)">
                    <button class="dropdown-item">
                        Expand to Level 1
                    </button>
                </li>
                <li click.trigger="dumpContainer.resultControls.expandAll(2)">
                    <button class="dropdown-item">
                        Expand to Level 2
                    </button>
                </li>
                <li click.trigger="dumpContainer.resultControls.expandAll(3)">
                    <button class="dropdown-item">
                        Expand to Level 3
                    </button>
                </li>
            </ul>
        </div>
    </div>

    <i class="icon-button navigate-top-icon"
       click.trigger="dumpContainer.navigationControls.navigateTop()"
       title="Top"></i>

    <i class="icon-button navigate-up-icon"
       click.trigger="dumpContainer.navigationControls.navigateUp()"
       title="Previous"></i>

    <i class="icon-button navigate-down-icon"
       click.trigger="dumpContainer.navigationControls.navigateDown()"
       title="Next"></i>

    <i class="icon-button navigate-bottom-icon"
       click.trigger="dumpContainer.navigationControls.navigateBottom()"
       title="Bottom"></i>

    <i class="icon-button scroll-on-output-icon ${dumpContainer.scrollOnOutput ? 'active' : ''}"
       click.trigger="dumpContainer.scrollOnOutput = !dumpContainer.scrollOnOutput"
       title="Scroll on Output"></i>

    <i class="icon-button text-wrap-icon ${dumpContainer.textWrap ? 'active' : ''}"
       click.trigger="dumpContainer.textWrap = !dumpContainer.textWrap"
       title="Text Wrap"></i>

    <i class="icon-button tree-expand-all-icon"
       click.trigger="dumpContainer.resultControls.expandAll()"
       title="Expand All"></i>

    <i class="icon-button tree-collapse-all-icon"
       click.trigger="dumpContainer.resultControls.collapseAll()"
       title="Collapse All"></i>

    <i class="icon-button clear-output-icon"
       click.trigger="dumpContainer.clearOutput()"
       title="Clear"></i>
</div>
